<div class="important">
    <img src="../public/all/images/important.png" width="18px"/>
    一个账户只能绑定同一个开户人姓名的银行卡。
</div>

<div class="card">
    <div class="line1">
        <div class="name"><img src="" height="60px"/></div>
        <div class="edit">
            <img src="../public/all/images/phone/bank-edit.png" width="22px"/>
        </div>
        <div class="clear"></div>
    </div>

    <div class="line2">
        <div class="name">开户姓名：<span>--</span></div>
        <div class="account">开户账号：<span>--</span></div>
        <div class="addr">开户网点：<span>--</span></div>
    </div>
</div>

<div class="add_card">
    <table class="center-table-form">
        <tr>
            <td class="label">开户银行：</td>
            <td class="field">
                <select data-am-selected class="am-form-field banklist">
                </select>
            </td>
            <td class="clue2">
            </td>
        </tr>
        <tr>
            <td class="label">开户网点：</td>
            <td class="field">
                <input type="text" class="am-form-field addr" placeholder="请填写开户网点" />
            </td>
            <td class="clue2">
            </td>
        </tr>
        <tr>
            <td class="label">银行卡号：</td>
            <td class="field">
                <input type="number" class="am-form-field account" placeholder="请填写银行卡卡号" />
            </td>
            <td class="clue2">
            </td>
        </tr>
    </table>
    <button class="center-form-button btn-add-card">保存</button>
</div>

<style type="text/css">
    .important {
        padding: 15px;
    }
    .card {
        margin: 15px 0px 0px 60px;
        width: 400px;
        background-color: white;
        border: 1px solid #b8b8b8;
        border-radius: 8px;
        display: none;
    }
    .card .line1 {
        border-bottom: 1px solid #b8b8b8;
        height: 50px;
    }
    .card .line1 .name {
        float: left;
        margin: 6px 0 0 20px;
    }
    .card .line1 .name img {
        height: 36px;
    }
    .card .line1 .edit {
        float: right;
        margin-right: 20px;
        margin-top: 10px;
    }
    .card .line2 div {
        margin-left: 20px;
        color: #848484;
        height: 40px;
        line-height: 40px;
        padding: 0px;
    }
    .card .line2 span {
        color: #69a8af;
    }
    .add_card .am-selected {
        width: 100%;
    }
</style>

<script>
    // 填充银行信息
    var s = $("select.banklist");
    s.empty();
    for (var i in Util.banks) {
        s.append('<option value="__v__">__v__</option>'.replace(/__v__/g, Util.banks[i].name));
    }

    function drawCardInfo() {
        if (!context.user) return;

        var v = context.user.user.bank;
        if (!v || v == '') {
            $(".add_card").show();
            $(".card").hide();
            return;
        }

        v = JSON.parse(v);
        $(".add_card").hide();
        $(".card").show();

        var b;
        for (var i in Util.banks) {
            if (Util.banks[i].name == v.bank) {
                b = Util.banks[i];
                break;
            }
        }
        if (b)
            $(".card .line1 .name img").attr("src", "../public/all/images/phone/" + b.icon);
        else
            $(".card .line1 .name").htmk(v.bank);
        $(".card .line2 .name span").html(context.user.user.name || '');
        $(".card .line2 .account span").html("尾号 " + v.account.substring(v.account.length - 4));
        $(".card .line2 .addr span").html(v.addr);
        $(".add_card select").val(v.bank);
        $(".add_card select").trigger('changed.selected.amui');
        $(".add_card input.account").val(v.account);
        $(".add_card input.addr").val(v.addr);
    }
    drawCardInfo();
    ME.cb = function() {
        ME.cb = null;
        drawCardInfo();
    };

    $(".card .edit").click(function() {
        $(".card").hide();
        $(".add_card").show();
    });

    $(".btn-add-card").click(function() {
        var addr = $("input.addr").val().trim();
        var account = $("input.account").val().trim();
        if (addr == '') {
            alert2("请填写开户网点名称！");
            return;
        }
        if (account == '') {
            alert2("请填写您的银行卡卡号！");
            return;
        }

        startLoading();
        CMD.modify_user_info(undefined, {
            bank: JSON.stringify({
                bank: $("select.banklist").val(),
                addr: addr,
                account: account,
            }),
        }, function() {
            stopLoading();
            Util.refresh();
        });
    });
</script>